<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

	<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
	<style type="text/css">

		table {
			text-align: center;
			left:0px;
			right: 0px;
			margin: auto;
		}
		#mundo tr td {
			border-style: solid;
			border-width: 1px;
			border-color: black;
			width: 70px;
			height: 70px;
		}
	</style>
	
	<script type="text/javascript">
	
		$(function(){

			jQuery.fn.eachDelay = function(callback, speed){
				return jQuery.eachDelay( this, callback, speed)
			}
			jQuery.extend({
				eachDelay: function(object,callback, speed){ 
					var name, i = -1, length = object.length, $div = $('<div>'), id;
					if (length === undefined) { //not an array process as object
						var arr = [], x = -1;
						for (name in object) arr[++x] = name; 
						id = window.setInterval(function(){
						 if( ++i === arr.length || callback.call(object[ arr[i] ], arr[i], object[ arr[i] ]) === false) 
						 	 clearInterval(id);
						}, speed);	
					}
					else { //array-compatible element ie. [], jQuery Object
						id = window.setInterval(function(){ 
							if (++i === object.length || callback.call(object[i], i, object[i]) === false) 
								clearInterval(id);
						}, speed);
					}
					return object;
				}
			});
			
			$(".draggable").draggable({
				helper: 'clone'
			});	
			
			$( "td","#mundo" ).droppable({
				drop: function( event, ui ) {
					var dropElem = ui.draggable;
					$( this ).append(dropElem);
				},
				tolerance: 'fit'
			});
			
			$("#iniciarMundo").click(function(){
				var conteudo = "";
				var recompensaVazia = $("#rvazia").val();
				var recompensaMorte = $("#rmorte").val();
				var recompensaSaida = $("#rsaida").val();
				var variacaoAceitavel = $("#vaceitavel").val();
				var fatorDesconto = $("#fdesconto").val();
				$( "td","#mundo" ).each(function(){
					var idCelula = $(this).attr("id");
					var idImg = $("img",this).attr("id");
					
					if(idImg != undefined){
						conteudo += idCelula+"="+idImg+",";						
					}
				});
				
				$.getJSON('<%=request.getContextPath()%>/iniciaMundo',
						{ 
							posicoes : conteudo,
							rvazia : recompensaVazia,
							rmorte : recompensaMorte,
							rsaida : recompensaSaida,
							vaceitavel :variacaoAceitavel,
							fdesconto: fatorDesconto
						},
						function(data) {
						}
				);
			});

			$("#iniciarRobo").click(function(){
				var conteudo = "";
				$( "td","#mundo" ).each(function(){
					var idCelula = $(this).attr("id");
					var idImg = $("img",this).attr("id");
					
					if(idImg == "Agente"){
						conteudo += idCelula;						
					}
				});

				$.getJSON('<%=request.getContextPath()%>/iniciaRobo',
						{ 
							posicoes : conteudo
						},
						function(data) {
							$.eachDelay(data, function(i,item){
								var agente = $("#Agente");
								$("#"+item.posicao).append(agente);
							},600);
						}
				);
				
			});
		});

	</script>
	
	
</head>
<body>
	<table>
		<tr>
			<td>Fator de desconto</td>
			<td>
				<input type="text" id="fdesconto" value="1"/>
			</td>
		</tr>
		<tr>
			<td>Variacao Aceitavel</td>
			<td>
				<input type="text" id="vaceitavel" value="0"/>	
			</td>
		</tr>
	</table>
	<table>
		<tr>
			<td colspan="2">
				Recompensas
			</td>
		</tr>
		<tr>
			<td>
				Celulas Vazias
			</td>
			<td>
				<input type="text" id="rvazia" value="-0.04"/>
			</td>
		</tr>
		
		<tr>
			<td>
				Morte
			</td>
			<td>
				<input type="text" id="rmorte" value="-1"/>
			</td>
		</tr>
		
		<tr>
			<td>
				Saida
			</td>
			<td>
				<input type="text" id="rsaida" value="1"/>
			</td>
		</tr>
	
	</table>
	
	<table>
		<tr>
			<td>
				<img alt="morte" src="img/morte.png" class="draggable" id="Morte"/>
			</td>
			<td>
				<img alt="saida" src="img/saida.png" class="draggable" id="Terminal"/>
			</td>
			<td>
				<img alt="parede" src="img/parede.png" class="draggable" id="Parede"/>
			</td>
			<td>
				<img alt="agente" src="img/agente.png" class="draggable" id="Agente"/>
			</td>
		</tr>
	</table>
	
	
	<table id="mundo">
		<tr>
			<td id="11">
				
			</td>
			<td id="12">
			</td>
			<td id="13">
			</td>
			<td id="14">
			</td>
		</tr>
		
		<tr>
			<td id="21">
			</td>
			<td id="22">
			</td>
			<td id="23">
			</td>
			<td id="24">
			</td>
		</tr>
		
		<tr>
			<td id="31">
			</td>
			<td id="32">
			</td>
			<td id="33">
			</td>
			<td id="34">
			</td>
		</tr>
		
		<tr>
			<td id="41">
			</td>
			<td id="42">
			</td>
			<td id="43">
			</td>
			<td id="44">
			</td>
		</tr>
		
	</table>
	
	<table>
		<tr>
			<td>
				<input type="button" id="iniciarMundo" value="Disparar Aprendizado"/>
			</td>
			<td>
				<input type="button" id="iniciarRobo" value="Animar Agente"/>
			</td>
		</tr>
	</table>
	

</body>
</html>